<template>
  <view>
    <view class="goods" >
      <view class="goods-left">
        <radio @click="clickR" class="goods-left-r" v-if="showRadio" :checked="item.goods_status" color="red"></radio>
        <image :src="item.goods_small_logo||defaultPic" mode=""></image>
      </view>
      <view class="goods-right">
        <view class="goods-right-top">
          {{item.goods_name}}
        </view>
        <view class="goods-right-bottom">
        <view class="goods-right-bottom-price">
        ￥ {{item.goods_price | priceNum}}     
        </view>
        <view class="goods-right-bottom-Num" v-if="showNum">
          <uni-number-box v-model="goods_count" @change="changeNum"></uni-number-box>
        </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
      showRadio:{
        type:Boolean,
        default:false
      },
      item:{
        type:Object
      },
      showNum:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' ,
        goods_count:this.item.goods_count
      };
    },
    filters:{
      priceNum(num){
      return  num.toFixed(2)
      }
    },
    methods:{
      // 点击numBox触发
      changeNum(e){
        this.$emit('changNum',{
          goods_id : this.item.goods_id,
          goods_count:e
        })
      },
      clickR(){
        this.$emit('radioChange',{
          goods_id:this.item.goods_id,
          goods_status:!this.item.goods_status
        })
      }
    }
  }
</script>

<style lang="scss">
.goods{
    font-size: 14px;
    padding: 20rpx;
    display: flex;
   .goods-left{
     display: flex;
     align-items: center;
      margin-right: 20rpx;
      image{
        width: 220rpx;
        height: 220rpx;
      }
    }
    .goods-right{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-right-bottom{
        color: #C00000;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>